<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model 指令的引入</title>
</head>
<body>
<div id="app">
    <div>请输入位置</div>
<!--    <input type="text" id="positon" v-on:input="inputChanged">-->
<!--    <input type="text" id="positon" v-on:input="inputChanged">-->
<!--    <input type="text" id="positon" v-on:input="position = $event.target.value">-->
    <input type="text" id="positon" v-on:input="position = $event.target.value"  v-bind:value="position">

    <h2>欢迎来到 {{ position }}</h2>
</div>
<script type="module">
    import {createApp, ref} from "../../../../../js/vue.esm-browser.js";

    const app = createApp({
        setup(){
            // let position = ref(null)
            let position = ref("西安")

            /*function inputChanged() {
                let element = document.getElementById("positon");

                // console.log(element.value);
                position.value = element.value
            }*/


            // function inputChanged(event) {
            //     // console.log(event);
            //     // console.log(event.target.value);
            //     position.value = event.target.value
            // }
            return {
                position,
                // inputChanged,
            }
        }
    })

    app.mount("#app")
</script>
</body>
</html>